<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title></title>
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
	<link href="css/responsive-style.css" rel="stylesheet" type="text/css"/>
	<link href="css/date-picker.css" rel="stylesheet" type="text/css"/>
	<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="scripts/jquery-ui-1.10.2.min.js"></script>
	<script type="text/javascript" src="scripts/jquery-colors-min.js"></script>
	<script type="text/javascript" src="scripts/date.js"></script>
	<script type="text/javascript" src="scripts/jquery.date-picker.js"></script>
	<script type="text/javascript" src="scripts/jquery.mCustomScrollbar.concat.min.js"></script>
	<script type="text/javascript" src="scripts/effect.js"></script>
</head>
<body>
<div class="page">
<div class="menu">
	<ul class="menu-list">
		<li class="menu-item home"><a href="#">Trang chủ</a></li>
		<li class="menu-item menu-group acc" id="acc"><a href="#">Tài khoản</a>

			<div class="menu-arrow"></div>
		</li>
		<li class="menu-item menu-group cate" id="cate"><a href="#">Thể loại</a>

			<div class="menu-arrow"></div>
		</li>
		<li class="menu-item menu-group day" id="day"><a href="#">BXH Ngày</a>

			<div class="menu-arrow"></div>
		</li>
		<li class="menu-item menu-group week" id="week"><a href="#">BXH Tuần</a>

			<div class="menu-arrow"></div>
		</li>

	</ul>
	<div class="menu-popup" id="menu-popup">

		<div class="menu-popup-form acc">
			<ul class="menu-popup-list">
				<li class="menu-popup-item simple" id="btnLogin">Đăng nhập</li>
				<li class="menu-popup-item simple" id="btnRegis">Đăng kí</li>
			</ul>
			<div class="menu-popup-profile" style="display: none;">
				<div class="form-head-profile">

				<div class="popup-profile-avt" style="background-image:url('images/resource/avt0.jpg')"></div>
				<div class="popup-profile-name">Username</div></div></div>
		</div>
		<div class="menu-popup-form cate">
			<ul class="menu-popup-list">
				<li class="menu-popup-item simple">Giải trí</li>
				<li class="menu-popup-item simple">Âm nhạc</li>
				<li class="menu-popup-item simple">Làm thế nào</li>
				<li class="menu-popup-item simple">Khoa học</li>
				<li class="menu-popup-item simple">Thế giới tự nhiên</li>
				<li class="menu-popup-item simple">Thể thao</li>
				<li class="menu-popup-item simple">Tâm lý người</li>
				<li class="menu-popup-item simple">Máy tính</li>
				<li class="menu-popup-item simple">Giao tiếp</li>
				<li class="menu-popup-item simple">Dành cho trẻ em</li>
				<li class="menu-popup-item simple">Thế giới</li>
				<li class="menu-popup-item simple">Khi yêu</li>
			</ul>
		</div>
		<div class="menu-popup-form day">
			<div class="menu-popup-head">
				<div class="menu-popup-calendar">
					<div class="menu-popup-calendar-current">
						<i class="menu-popup-icon calendar-date"></i>
						<input readonly="readonly" type="text" class="date-pick" value="28/05/2013"/>
					</div>
				</div>
			</div>
			<ul class="menu-popup-list special" id="rank-list-day">
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">1</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">2</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">3</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<span class="menu-popup-user">Name3</span>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">4</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">5</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">6</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">7</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">8</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">4</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">5</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">6</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">7</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">8</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">4</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">5</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">6</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">7</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">8</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">9</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">10</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
			</ul>
		</div>
		<div class="menu-popup-form week">
			<div class="menu-popup-head">
				<div class="menu-popup-calendar">
					<div class="menu-popup-calendar-current">
						<i class="menu-popup-icon calendar-week"></i>
						<input readonly="readonly" type="text" class="date-pick week" value="28/05/2013"/>
					</div>
				</div>
			</div>
			<ul class="menu-popup-list special" id="rank-list-week">
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">1</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">2</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">3</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<span class="menu-popup-user">Name3</span>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">4</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">5</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">6</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">7</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">6</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">7</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">6</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">7</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item">
					<span class="menu-popup-num">6</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt1.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
				<li class="menu-popup-item odd">
					<span class="menu-popup-num">7</span>
					<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
					<a href="" class="menu-popup-user">Name1</a>
					<span class="menu-popup-score">2000</span>
				</li>
			</ul>
		</div>
	</div>

</div>

<div class="form-head">
	<span>Learning-English</span><span class="form-head-gray">Profile</span>

	<div class="form-head-task">
		<div class="form-head-account">
		<div class="form-head-account-wrapper">
			<div class="form-head-profile">
				<span>Username</span>
				<span class="menu-popup-avt" style="background-image:url('images/resource/avt0.jpg')"></span>
			</div><div class="form-head-logout"><a>Profile</a><a>Logout</a></div>
		</div>
		</div>
		<div class="form-head-search">
			<div class="form-head-search-mask">
				<input class="search-text" type="text" placeholder="Nhập nội dung tìm kiếm" value=""/>

				<div class="search-button"></div>

			</div>
		</div>

	</div>
</div>
<div class="form">
	<div class="profile-tag">
		<div class="profile-head">Infomation</div>
		<div class="profile-avt"></div>
		<div class="profile-title white">Info title 0</div>
		<div class="profile-text white">Value text value</div>
		<div class="profile-title white">Info title 1</div>
		<div class="profile-text white">Value text</div>
		<div class="profile-title white">Info title 2</div>
		<div class="profile-text white">Value text 2</div>
		<div class="profile-button white"><i class="profile-button-icon edit"></i><span>Edit profile</span></div>
	</div>
	<div class="profile-panel">
		<div class="profile-head">Result</div>
		<div class="profile-name">Name name name</div>
		<div class="profile-title">Title title </div>
		<div class="profile-text">Text text</div>

		<div class="profile-title">Result table</div>
		<ul class="control-rank-list profile">
			<li class="rank-row-item head">
				<span href="" class="rank-row-name">Video Name</span>
				<span class="rank-row-point">Points </span>
				<span href="" class="rank-row-time">Date time</span>
			</li>
			<li class="rank-row-item">
				<span class="rank-row-num">1</span>
				<a href="" class="rank-row-name">Name1</a>
				<span class="rank-row-point">3,000</span>
				<span class="rank-row-time">12/12/2013</span>
			</li>
			<li class="rank-row-item">
				<span class="rank-row-num">1</span>
				<a href="" class="rank-row-name">Name1</a>
				<span class="rank-row-point">3,000</span>
				<span class="rank-row-time">12/12/2013</span>
			</li>
			<li class="rank-row-item">
				<span class="rank-row-num">1</span>
				<a href="" class="rank-row-name">Name1</a>
				<span class="rank-row-point">3,000</span>
				<span class="rank-row-time">12/12/2013</span>
			</li>
			<li class="rank-row-item">
				<span class="rank-row-num">1</span>
				<a href="" class="rank-row-name">Name1</a>
				<span class="rank-row-point">3,000</span>
				<span class="rank-row-time">12/12/2013</span>
			</li>
			<li class="rank-row-item">
				<span class="rank-row-num">1</span>
				<a href="" class="rank-row-name">Name1</a>
				<span class="rank-row-point">3,000</span>
				<span class="rank-row-time">12/12/2013</span>
			</li>
			<li class="rank-row-item">
				<span class="rank-row-num">1</span>
				<a href="" class="rank-row-name">Name1</a>
				<span class="rank-row-point">3,000</span>
				<span class="rank-row-time">12/12/2013</span>
			</li>
			<li class="rank-row-item">
				<span class="rank-row-num">1</span>
				<a href="" class="rank-row-name">Name1</a>
				<span class="rank-row-point">3,000</span>
				<span class="rank-row-time">12/12/2013</span>
			</li>
			<li class="rank-row-item">
				<span class="rank-row-num">1</span>
				<a href="" class="rank-row-name">Name1</a>
				<span class="rank-row-point">3,000</span>
				<span class="rank-row-time">12/12/2013</span>
			</li>
			<li class="rank-row-item">
				<span class="rank-row-num">1</span>
				<a href="" class="rank-row-name">Name1</a>
				<span class="rank-row-point">3,000</span>
				<span class="rank-row-time">12/12/2013</span>
			</li>
			<li class="rank-row-item">
				<span class="rank-row-num">1</span>
				<a href="" class="rank-row-name">Name1</a>
				<span class="rank-row-point">3,000</span>
				<span class="rank-row-time">12/12/2013</span>
			</li>
			<li class="rank-row-item">
				<span class="rank-row-num">1</span>
				<a href="" class="rank-row-name">Name1</a>
				<span class="rank-row-point">3,000</span>
				<span class="rank-row-time">12/12/2013</span>
			</li>
			<li class="rank-row-item more">
				<span class="rank-row-button more">More</span>
			</li>
		</ul>

	</div>
</div>
<div class="popup disable">
	<div class="popup-back"></div>
	<div class="popup-form login">
		<div class="popup-wrapper">
			<div class="login-avt"></div>
			<div class="login-info">
				<div class="login-info-title">
					<span>Đăng nhập</span>

					<div class="popup-progress" style="display: block"></div>
				</div>
				<div class="login-info-row"><span class="login-info-label">Tên tài khoản:</span>
					<input class="login-info-input" type="text" value=""/>
				</div>
				<div class="login-info-row"><span class="login-info-label">Mật khẩu:</span>
					<input class="login-info-input" type="password" value=""/>
				</div>
				<div class="login-info-row large">
					<a class="login-info-link">Quên mật khẩu?</a>
					<a class="login-info-button">Đăng nhập</a>
				</div>
				<div class="login-info-row">
					<a class="login-info-link" id="login-info-link-register">Chưa có tài khoản?</a>
				</div>
			</div>
		</div>
	</div>
	<div class="popup-form register">
		<div class="popup-wrapper">
			<div class="login-info">
				<div class="login-info-title">
					<span>Đăng kí</span>

					<div class="popup-progress" style="display: block"></div>
				</div>
				<div class="login-info-row error">
					<span class="login-info-label">Tên tài khoản:</span>
					<input class="login-info-input" placeholder="Không quá 12 ký tự" type="text" value=""/>
				</div>
				<div class="login-info-row error">
					<span class="login-info-label">Email:</span>
					<input class="login-info-input" type="text" value=""/>
				</div>
				<div class="login-info-row">
					<span class="login-info-label">Xác nhận email:</span>
					<input class="login-info-input" type="text" value=""/>
				</div>
				<div class="login-info-row ok"><span class="login-info-label">Mật khẩu:</span>
					<input class="login-info-input" type="password" value=""/>
				</div>
				<div class="login-info-row"><span class="login-info-label">Xác nhận mật khẩu:</span>
					<input class="login-info-input" type="password" value=""/>
				</div>
				<div class="login-info-row large">
					<a class="login-info-button">Đăng kí</a>
				</div>
			</div>
			<div class="login-message">
				<div class="login-message-content">
					Xảy ra sự cố trong quá trình đăng kí...<br/>
					- Tên đăng nhập không hợp lệ<br/>
					- Email không hợp lệ<br/>
					- ...<br/>
				</div>
				<div class="login-message-footer"></div>
			</div>
		</div>
	</div>
</div>
</div>
</body>
</html>